<template>
  <div class="com-container">
    <h3 class="title">测试人数统计</h3>
    <div class="cards-container">

      <div class="card">
        <div class="card-img" style="background-color: #3b82f6;">
          <el-icon><Printer /></el-icon>
        </div>
        <div class="card-content statistic-row">
          <el-statistic class="statistic-item" title="总次数" :value="total">
            <template #prefix>
              <el-icon class="icon">
                <user/>
              </el-icon>
            </template>
          </el-statistic>
        </div>
      </div>

      <div class="card">
        <div class="card-img" style="background-color: #10b981;">
          <el-icon><Coffee /></el-icon>
        </div>
        <div class="card-content">
          <el-statistic
              class="statistic-item"
              title="总人数"
              :value="peopleSet.size"
              :precision="0"
          >
            <template #prefix>
              <el-icon class="icon">
                <Connection/>
              </el-icon>
            </template>
          </el-statistic>
        </div>
      </div>

      <!-- 卡片3 -->
      <div class="card">
        <div class="card-img" style="background-color: #f59e0b;">
<!--          <i class="fa fa-lightbulb"></i>-->
          <el-icon><MilkTea /></el-icon>
        </div>
        <div class="card-content">
          <el-statistic
              class="statistic-item"
              title="今日新增"
              :value="todayNum"
              :precision="0"
          >
            <template #prefix>
              <el-icon class="icon">
                <plus/>
              </el-icon>
            </template>
          </el-statistic>
        </div>
      </div>

      <!-- 卡片4 -->
      <div class="card">
        <div class="card-img" style="background-color: #ef4444;">
<!--          <i class="fa fa-heart"></i>-->
          <el-icon><IceTea /></el-icon>
        </div>
        <div class="card-content">
          <el-statistic
              class="statistic-item"
              title="本月新增"
              :value="monthNum"
              suffix="个"
          >
            <template #prefix>
              <el-icon class="icon">
                <clock/>
              </el-icon>
            </template>
          </el-statistic>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import '@/assets/styles/fontawesome.css'
import {Clock, Plus, User, Connection, Printer, Coffee, MilkTea, IceTea} from "@element-plus/icons-vue";
import {listTest_record} from "@/api/chart/charts.js";
import {formatDate, formatMonth} from "@/utils/index.js";

export default {
  components: {IceTea, MilkTea, Coffee, Printer, Connection, Clock, Plus, User},
  props: {},
  data() {
    return {
      list: [],
      total: 0,
      todayNum: 0,
      monthNum: 0,
      peopleSet: new Set(),
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    init() {
      let query = {}
      listTest_record(query).then(res => {
        if (res.code === 200) {
          // console.log(res)
          this.total = res.data.length
          this.list = res.data
          this.getPeopleNum(this.list)
        }
      })
    },
    getPeopleNum(data){
      const date = formatDate();
      const month = formatMonth();
      this.todayNum = 0
      this.monthNum = 0
      data.forEach((item, index) => {
        // console.log(item)
        if (item.createTime.indexOf(date) > -1) {
          this.todayNum ++
        }
        if (item.createTime.indexOf(month) > -1) {
          this.monthNum ++
        }
        this.peopleSet.add(item.userName)
      })
    },
  }
}
</script>

<style scoped>

.com-container {
  width: 100%;
  height: 300px;
  position: relative;
}

.title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2rem;
}


.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.card {
  background-color: white;
  border-radius: 8px;
  align-items: center;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card-img {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.card-content {
  padding: 1.2rem;
}

/* 核心：用 Flex 实现同行显示 */
.statistic-row {
  display: flex; /* 启用 Flex 布局 */
  flex-wrap: wrap; /* 屏幕较小时自动换行 */
}

/* 图标样式 */
.icon {
  color: #409eff;
  margin-right: 8px;
}

.statistic-item {
  flex: 1; /* 每个统计项平均分配宽度 */
  padding-left: 15px;
  background: #f9fafb;
  border-radius: 6px;
}
</style>
